<script setup lang="ts">
defineOptions({
  name: "Containers"
});
import {
  Refresh,
  SwitchButton,
  CircleCheck,
  Delete,
  CircleCheckFilled,
  Clock
} from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import {
  getVmAdminContainer,
  pauseInstance,
  unpauseInstance,
  getInstanceVolumeList,
  openInstance,
  startInstance,
  getInstanceLog,
  getInstancePortList,
  addPort,
  stopInstance,
  restartInstance,
  deleteInstance,
  selectServer,
  selectServerPlan,
  getInstanceConsole,
  getInstanceStatus,
  reinstallI,
  addVolumeMount,
  updateVolume,
  deleteVolume,
  rescueInstance,
  exitRescueInstance,
  changeInstancePassword
} from "@/api/server";
import { getMirrorList, Mirrorinfo } from "@/api/mirror";
import {
  vmStatus,
  vmStatusColor,
  statusMap,
  statusColor,
  volumeStatus,
  volumeStatusColor
} from "@/utils/hide";
import { message } from "@/utils/message";
import {
  delPort,
  Containerpaytime,
  Containertimetime,
  editContainer
} from "@/api/user";
import { ElLoading } from "element-plus";
import { ElForm } from "element-plus";
import AddHttps from "./components/AddHttps.vue";
import SetUSer from "./components/SetUser.vue";
import SetPlan from "./components/SetPlan.vue";
import Migrate from "./components/Migrate.vue";
import VirtualWeb from "./components/VirtualWeb.vue";
import RunLogs from "./components/RunLogs.vue";
import Snapshot from "./components/Snapshot.vue";
const router = useRouter();
const route = useRoute();
//获取容器日志
const getLogs = async data => {
  let res3 = await getInstanceLog(route.query.container_id, data);
  let newRes = res3.data.data;
  logTotal.value = res3.data.count;
  newRes = newRes.map(item => {
    return {
      created_at: item.created_at,
      action_info: item.action_info
    };
  });
  containers_log.value = newRes;
};
onMounted(async () => {
  setWideth();
  await getcontaiinfo();
  //获取容器卷列表
  await VolumeList();
  //获取虚拟机操作日志
  getLogs({ ...logPagin });
  // 获取虚拟机链接端口
  await GetVmLink();
  // 获取虚拟机端口列表
  await gettwolist();
  await getStatus();
});
//获取虚拟机卷列表
const volumes = ref([]);
const VolumeList = async () => {
  let res2 = await getInstanceVolumeList({ ...VmVolumespage });
  VmVolumesConnerct.value = res2.data.count;
  volumes.value = res2.data.data;
};
// 获取虚拟机链接端口
const Vm_link = ref("");
const GetVmLink = async () => {
  let { data } = await getInstancePortList({
    instance_id: route.query.container_id,
    internal_port: 3389
  });
  Vm_link.value = data.data[0].node_port;
};
// 数据卷分页
const VmVolumesConnerct = ref("");
const VmVolumespage = reactive({
  count: 10,
  page: 1,
  instance_id: route.query.container_id
});
const VmVolumesSizeChange = async count => {
  VmVolumespage.count = count;
  await VolumeList();
};
const VmVolumesPageChange = async page => {
  VmVolumespage.page = page;
  await VolumeList();
};
// 添加端口弹窗判定
const addPortDialog = ref(false);
// 添加数据卷信息
const formVolumes = reactive({
  size: "",
  instance_id: route.query.container_id,
  user_id: ""
});
// 创建数据卷
const addVolumesDialog = ref(false);
const formRefs = ref<InstanceType<typeof ElForm>>();

const rules = {
  size: [
    {
      required: true,
      message: "请输入容器卷大小",
      trigger: "blur"
    }
  ]
};
const addVolumes = async () => {
  formRefs.value?.validate(valid => {
    if (valid) {
      addVolumesDialog.value = true;
      console.log("添加数据卷", formVolumes);
      addVolumeMount({ ...formVolumes })
        .then(async res => {
          message(res.data.data, { type: "success" });
          addPortDialog.value = false;
          addVolumesDialog.value = false;
          await VolumeList();
        })
        .catch(err => {
          addVolumesDialog.value = false;
        });
    }
  });
};
// 修改数据卷大小
const SetVolumesSzie = async (size, volume_id) => {
  await updateVolume({
    volume_id,
    size
  }).then(async res => {
    message(res.data.msg, { type: "success" });
    await VolumeList();
  });
};
// 删除数据卷
const delVolumes = async id => {
  console.log("删除数据卷", id);
  await deleteVolume({ volume_id: id }).then(async res => {
    message(res.data.data, { type: "success" });
    await VolumeList();
  });
};
// 迁移数据卷
const migrateVolumesDialog = ref(false);
const migrateVolumesID = ref("");
const migrateVolumes = id => {
  migrateVolumesDialog.value = true;
  migrateVolumesID.value = id;
};
const SetVolumes = async () => {
  migrateVolumesDialog.value = false;
  await VolumeList();
};

// 获取虚拟机信息
const getcontaiinfo = async (pay = "", time = "") => {
  let res = await getVmAdminContainer(route.query.container_id);
  let obj = await selectServer({ server_id: res.data.data.server_id });
  let obj2 = await selectServerPlan({
    plan_id: res.data.data.plan_id,
    server_type: "hyperV"
  });
  let obj3 = await Mirrorinfo({
    image_id: res.data.data.image_id,
    server_type: "hyperV"
  });
  if (res.data.data && !pay && !time) {
    // 获取用户ID
    formVolumes.user_id = res.data.data.user_id;
    // 价格信息
    contaimoney.value = res.data.data.pay;
    // 服务器信息
    container_message.value = res.data.data;
    // 服务器信息补充
    container_message.value.fwq = obj.data.data;
    // 套餐信息补充
    container_message.value.tc = obj2.data.data;
    // 镜像信息补充
    container_message.value.jx = obj3.data.data;
    // 时间信息
    conttimes.value = res.data.data.become_time;
    // 快照信息
    snapshot_num.value = container_message.value.tc.snapshot_num;
    password_text.value = res.data.data.password;
    console.log("容器状态", container_message.value);
  } else if (pay && !time) {
    contaimoney.value = res.data.data.pay;
  } else if (!pay && time) {
    conttimes.value = res.data.data.become_time;
  }
};
// 修改虚拟机密码
const password_text = ref("");
const SetPassWord = async ID => {
  await changeInstancePassword(ID, { password: password_text.value }).then(
    async res => {
      console.log("修改密码", res);
      message(res.data.data, { type: "success" });
      await getcontaiinfo();
    }
  );
};
// 获取虚拟机端口列表
const gettwolist = async () => {
  let res4 = await getInstancePortList({ ...VmPortInfo });
  VmConnect.value = res4.data.count;
  container_connect.value = res4.data.data;
  await getServerName();
  await getPlanName();
};
// 获取虚拟机端口分页信息
const VmConnect = ref("");
const VmPortInfo = reactive({
  count: 10,
  page: 1,
  instance_id: route.query.container_id
});
const VmConnectPageChange = async page => {
  VmPortInfo.page = page;
  await gettwolist();
};
const VmConnectSizeChange = async count => {
  VmPortInfo.count = count;
  await gettwolist();
};

//实时虚拟机状态
const container_state = ref();
const getStatus = async () => {
  let res = await getInstanceStatus(route.query.container_id);
  if (res.data.code == 200) {
    container_state.value = res.data.data.data.state;
  }
};
//开通服务器
const openIt = async id => {
  let res = await openInstance(id);
  console.log("开通容器", res);
  message(res.data.msg, { type: "success" });
  await getLogs({ ...logPagin });
  await getStatus();
};
//启动虚拟机
const startIt = async data => {
  let res = await startInstance(data);
  console.log("启动", res);
  message(res.data.data, { type: "success" });
  await getLogs({ ...logPagin });
  await getStatus();
};
//停止虚拟机
const stopIt = async data => {
  let res = await stopInstance(data);
  message(res.data.data, { type: "success" });
  await getLogs({ ...logPagin });
  await getStatus();
};
//重启虚拟机
const restartIt = async data => {
  let res = await restartInstance(data);
  console.log("重启容器", res);
  message(res.data.data, { type: "success" });
  await getLogs({ ...logPagin });
  await getStatus();
};
//删除虚拟机
const deleteIt = async data => {
  let res = await deleteInstance(data);
  console.log("删除容器", res);
  message(res.data.mag, { type: "success" });
  await getStatus();
  router.push("/servers/virtuallist");
};
//连接控制台
const console_url = ref("");
const connectIt = async data => {
  let res = await getInstanceConsole(data);
  console.log("连接控制台", res.data.data);
  if (res.data.code == 200) {
    window.open(res.data.data);
  } else {
    message(res.data.data, { type: "error" });
  }
};
//获取服务器名称
const serverName = ref("");
const serverIP = ref("");
const getServerName = async () => {
  let res = await selectServer({
    server_id: container_message.value.server_id
  });
  console.log("服务器信息", res.data.data.console_url);
  console_url.value = res.data.data.console_url;
  serverName.value = res.data.data.name;
  serverIP.value = res.data.data.server_ip;
};
//获取套餐名
const planName = ref("");
const getPlanName = async () => {
  let res = await selectServerPlan({
    plan_id: container_message.value.plan_id,
    server_type: "hyperV"
  });
  console.log("套餐信息", res.data.data);
  planName.value = res.data.data;
};

const dialogOverflowVisible = ref(false);
const form = reactive({
  container_port: ""
});
const logPagin = reactive({
  count: 10,
  page: 1
});
const logTotal = ref(10);
const handleCurrentPageChange = async newPage => {
  logPagin.page = newPage;
  getLogs({ ...logPagin });
};
const handlePageSizeChange = async newSize => {
  logPagin.count = newSize;
  getLogs({ ...logPagin });
};
const container_message = ref({});
const containers_log = ref([]);

const container_connect = ref([]);
const formRef = ref<InstanceType<typeof ElForm>>();
const submit = async () => {
  formRef.value?.validate(async valid => {
    if (valid) {
      await addPort({
        instance_id: route.query.container_id,
        internal_port: form.container_port
      }).then(res => {
        console.log(res);
        message(res.data.data, { type: "success" });
        dialogOverflowVisible.value = false;
        gettwolist();
      });
    }
  });
};
// 删除端口
const delconnect = async id => {
  let { data } = await delPort({
    port_forward_id: id
  });
  await gettwolist();
};
// 获取屏幕大小
const contWith = ref(4);
const setWideth = () => {
  if (window.innerWidth < 800) {
    contWith.value = 1;
  } else {
    contWith.value = 4;
  }
};
// 修改价格
const contaimoney = ref(0);
const setpay = async container_id => {
  const regex = /^\d+(\.\d{1,2})?$/;
  if (!regex.test(contaimoney.value)) {
    message("请输入正确的价格", { type: "error" });
    contaimoney.value = container_message.value.pay;
  } else {
    let { data } = await Containerpaytime(
      { pay: contaimoney.value },
      container_message.value.id
    );
    console.log("修改价格", data);
    if (data.code == 200) {
      await getcontaiinfo(contaimoney.value);
      message("修改成功", { type: "success" });
    }
  }
};
// 容器日期
const conttimes = ref();
const containerPacker = async (val: string | null) => {
  const selectedDate = new Date(val);
  const timestamp = Math.floor(selectedDate.getTime() / 1000);
  console.log(timestamp, selectedDate);
  let { data } = await Containertimetime(
    { expire_time: timestamp },
    container_message.value.id
  );
  if (data.code == 200) {
    message("修改成功", { type: "success" });
    await getcontaiinfo("", timestamp);
  }
};
//重装
const image_dialog = ref(false);
const image_list = ref([]);
const image_id = ref();
const image = ref({});
const getImage = async () => {
  getMirrorList(container_message.value.server_id).then(res => {
    res = res.data.data;
    image.value = res.filter(
      item => item.image_id == container_message.value.image_id
    )[0];
    console.log("镜像信息", typeof image.value);
  });
};
const toRein = async () => {
  image_dialog.value = true;
  let res = await getMirrorList(container_message.value.server_id);
  res = res.data.data;
  console.log("镜像信息", res);
  image_list.value = res.map(item => {
    return {
      label: item.name,
      value: item.id
    };
  });
};
const torein = () => {
  const loading = ElLoading.service({
    lock: true,
    text: "容器重装中..."
  });
  reinstallI({ image_id: image_id.value }, container_message.value.id)
    .then(async res => {
      if (res.data.code == 200) {
        message("容器重装完成", { type: "success" });
        loading.close();
        await getcontaiinfo();
        image_dialog.value = false;
      } else {
        message(res.data.data, { type: "error" });
        loading.close();
      }
    })
    .catch(e => {
      message("重装失败", { type: "error" });
      loading.close();
    });
};
//镜像变量
const objectToString = obj => {
  console.log("镜像信息", obj);
  obj = JSON.parse(obj);
  if (
    obj &&
    typeof obj === "object" &&
    !Array.isArray(obj) &&
    Object.keys(obj).length > 0
  ) {
    return Object.entries(obj);
  } else {
    return "";
  }
};
const setupstop = ref(false);
const textstop = ref();
const stopId = ref();
// 暂停容器&&恢复容器
const butstoped = async (isstop, id) => {
  if (!isstop) {
    setupstop.value = true;
    stopId.value = id;
  } else {
    const loading = ElLoading.service({
      lock: true,
      text: "解除暂停中.....",
      background: "rgba(0, 0, 0, 0.7)"
    });
    await unpauseInstance(id).then(async res => {
      if (res.data.code == 200) {
        message(res.data.data, { type: "success" });
        loading.close();
        await getcontaiinfo();
      } else {
        message(res.data.data, { type: "error" });
        loading.close();
      }
    });
  }
};
// 确认暂停
const okstop = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: "暂停中.....",
    background: "rgba(0, 0, 0, 0.7)"
  });
  await pauseInstance(
    { stop_info: textstop.value },
    container_message.value.id
  ).then(async res => {
    if (res.data.code == 200) {
      setupstop.value = false;
      loading.close();
      message(res.data.data, { type: "success" });
      await getcontaiinfo();
    } else {
      message(res.data.data, { type: "error" });
      loading.close();
    }
  });
};

const offdialog = () => {
  httpscert.value = false;
};
// 修改信息
const snapshot_num = ref("");
const setSnapshot = async id => {
  await editContainer({ snapshot_num: snapshot_num.value }, id).then(res => {
    if (res.data.code == 200) {
      message(res.data.msg, { type: "success" });
    }
  });
};
// 转移用户
const SetUser_dialog = ref(false);
const vmSetUser = async id => {
  await editContainer({ user_id: id }, container_message.value.id).then(res => {
    if (res.data.code == 200) {
      message(res.data.msg, { type: "success" });
      SetUser_dialog.value = false;
    }
  });
};
// 套餐列表
const SetPlan_dialog = ref(false);
const vmSetPlan = async id => {
  await editContainer({ plan_id: id }, container_message.value.id).then(res => {
    if (res.data.code == 200) {
      message(res.data.msg, { type: "success" });
      SetPlan_dialog.value = false;
    }
  });
};
const SetInfoState = id => {
  alert(id);
};

const rescueBut = ref(false);
const rescue = async id => {
  rescueBut.value = true;
  await rescueInstance(id).then(res => {
    if (res.data.code == 200) {
      message(res.data.data, { type: "success" });
    } else {
      message(res.data.data.msg, { type: "error" });
    }
    rescueBut.value = false;
  });
};
const rescue_exit_but = ref(false);
const rescue_exit = async id => {
  rescue_exit_but.value = true;
  await exitRescueInstance(id).then(res => {
    if (res.data.code == 200) {
      message(res.data.data, { type: "success" });
    } else {
      message(res.data.data.msg, { type: "error" });
    }
    rescue_exit_but.value = false;
  });
};
</script>
<template>
  <div class="body">
    <el-descriptions v-if="
      container_message.tc && container_message.fwq && container_message.jx
    " title="虚拟机信息" direction="vertical" :column="contWith" size="default" border>
      <el-descriptions-item label="虚拟机 ID">{{
        container_message.id
        }}</el-descriptions-item>
      <el-descriptions-item label="用户 ID">
        <div class="flex">
          <div class="m-r-10px">{{ container_message.user_id }}</div>
          <el-button size="small" plain @click="SetUser_dialog = true">转移用户</el-button>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="价格">
        <el-input v-model="contaimoney" type="number" style="width: 100px" placeholder="价格"
          @change="setpay(container_message.pay)" /><span style="margin-left: 10px">元</span>
      </el-descriptions-item>
      <el-descriptions-item label="所属服务器">{{
        container_message.fwq.name
        }}</el-descriptions-item>
      <el-descriptions-item label="服务器IP">{{
        container_message.fwq.server_ip
        }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">
        <el-tag size="small">{{ container_message.created_at }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="到期时间">
        <el-date-picker v-model="conttimes" type="datetime" placeholder="到期时间" format="YYYY-MM-DD HH:mm:ss"
          date-format="MMM DD, YYYY" time-format="HH:mm" @change="containerPacker" />
      </el-descriptions-item>
      <el-descriptions-item label="所属套餐">
        <div class="flex">
          <div class="m-r-10px">{{ container_message.tc.name }}</div>
          <el-button size="small" plain @click="SetPlan_dialog = true">更换套餐</el-button>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="内存">{{ container_message.tc.memory }}MB</el-descriptions-item>
      <el-descriptions-item label="硬盘">{{ container_message.tc.disk }}GB</el-descriptions-item>
      <el-descriptions-item label="cpu">{{ container_message.tc.cpu }}核</el-descriptions-item>
      <el-descriptions-item label="默认允许快照数 " :span="1">
        <div class="flex items-center">
          <el-input v-model="snapshot_num" type="number" :min="1" style="width: 100px; height: 24px" placeholder="数量" />
          <el-button class="m-l-10px" @click="setSnapshot(container_message.id)">确认</el-button>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="链接端口号" :span="1">
        {{ Vm_link }}
      </el-descriptions-item>
      <el-descriptions-item label="虚拟机用户名" :span="1">
        {{ container_message.hostname }}
      </el-descriptions-item>
      <el-descriptions-item label="虚拟机密码" :span="1">
        <el-input v-model="password_text" type="text" style="width: 200px; height: 24px" placeholder="数量" />
        <el-button class="m-l-10px" size="small" @click="SetPassWord(container_message.id)">确认</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="镜像">{{
        container_message.jx.name
        }}</el-descriptions-item>
      <el-descriptions-item label="虚拟机IP">{{
        container_message.network_ip
        }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag v-if="container_message.state == '2'" :type="vmStatusColor(container_state)">{{
          vmStatus(container_state) }}</el-tag>
        <el-tag v-else :type="statusColor(container_message.state)">{{
          statusMap(container_message.state)
          }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item :span="24" label="操作">
        <el-col :span="24" :xs="24">
          <el-button type="primary" plain :icon="CircleCheckFilled" @click="openIt(container_message.id)">开通</el-button>
          <el-button type="success" plain :icon="CircleCheck" @click="startIt(container_message.id)">启动</el-button>
          <el-button type="info" plain :icon="SwitchButton" @click="stopIt(container_message.id)">停止</el-button>
          <el-button type="danger" plain :icon="Clock"
            @click="butstoped(container_message.stopped, container_message.id)">{{ container_message.stopped ? "解除暂停" :
            "暂停" }}</el-button>
          <el-button type="warning" plain :icon="Refresh" @click="restartIt(container_message.id)">重启</el-button>
          <el-button type="warning" :icon="Refresh" plain @click="toRein">重装</el-button>
          <el-button type="danger" plain :icon="Delete" @click="deleteIt(container_message.id)">删除</el-button>
          <el-button type="primary" :disabled="container_state != 2"
            @click="connectIt(container_message.id)">连接控制台</el-button>
          <el-button type="success" :loading="rescueBut" @click="rescue(container_message.id)">进入救援系统</el-button>
          <el-button :loading="rescue_exit_but" @click="rescue_exit(container_message.id)">退出救援系统</el-button>
        </el-col>
      </el-descriptions-item>
      <el-descriptions-item :span="8" label="镜像描述">
        <div class="mytitle">{{ container_message.jx.description }}</div>
      </el-descriptions-item>
    </el-descriptions>
    <!-- tab栏 -->
    <el-tabs type="border-card" class="info_table">
      <el-tab-pane label="虚拟机操作日志">
        <el-table :data="containers_log" style="width: 100%">
          <el-table-column prop="created_at" label="时间" />
          <el-table-column prop="action_info" label="日志" />
        </el-table>
        <div class="m-t-15px">
          <el-pagination background layout="prev, pager, next,sizes" :total="logTotal" :current-page="logPagin.page"
            :page-size="logPagin.count" :page-sizes="[1, 10, 20]" @update:current-page="handleCurrentPageChange"
            @update:page-size="handlePageSizeChange" />
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="container_message.id" label="实例监控" :lazy="true">
        <RunLogs :ID="container_message.id" />
      </el-tab-pane>
      <el-tab-pane label="端口管理" :lazy="true">
        <div class="flex items-end">
          <el-button type="primary" @click="dialogOverflowVisible = true">添加端口</el-button>
          <div class="m-l-10px text-14px text-#838282 font-bold">
            <span>默认允许开放端口数</span>
            <span class="text-20px m-l-5px text-#e34d4dfa">{{
              container_message.tc.port_num
              }}</span>
          </div>
        </div>
        <el-table class="table_el" :data="container_connect" style="width: auto">
          <el-table-column label="ID" prop="id" />
          <el-table-column label="外部访问端口" prop="node_port" />
          <el-table-column label="内部端口" prop="internal_port" />
          <el-table-column label="创建时间" prop="created_at" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-row :gutter="24">
                <el-col :xs="12" :sm="12" :md="12" :lg="24" :xl="24">
                  <el-button type="danger" plain @click="delconnect(scope.row.id)">删除</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <div class="m-t-15px">
          <el-pagination background layout="prev, pager, next,sizes" :total="VmConnect" :current-page="VmPortInfo.page"
            :page-size="VmPortInfo.count" :page-sizes="[1, 10, 20]" @update:current-page="VmConnectPageChange"
            @update:page-size="VmConnectSizeChange" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="数据卷信息">
        <el-button type="primary" @click="addPortDialog = true">添加数据卷</el-button>
        <div class="ovf">
          <div class="min-w-800px">
            <el-table class="table_el" :data="volumes" style="width: auto">
              <el-table-column label="ID" prop="id" />
              <el-table-column label="空间大小(GB)">
                <template #default="scope">
                  <div class="flex items-center min-w-120px">
                    <el-input v-model="scope.row.size" type="number" style="width: 100px; height: 24px" :min="1"
                      placeholder="GB" />
                    <el-button size="small" plain class="m-l-15px"
                      @click="SetVolumesSzie(scope.row.size, scope.row.id)">确认</el-button>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="created_at" />
              <el-table-column label="状态">
                <template #default="scope">
                  <el-tag :type="volumeStatusColor(scope.row.state)">{{
                    volumeStatus(scope.row.state)
                    }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template #default="scope">
                  <el-row :gutter="24">
                    <el-col :xs="12" :sm="24" :md="12" :lg="12" :xl="12">
                      <el-button plain @click="migrateVolumes(scope.row.id)">迁移</el-button>
                    </el-col>
                    <el-col :xs="12" :sm="24" :md="12" :lg="12" :xl="12">
                      <el-button type="danger" plain @click="delVolumes(scope.row.id)">删除</el-button>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
            <div class="m-t-15px">
              <el-pagination background layout="prev, pager, next,sizes" :total="VmVolumesConnerct"
                :current-page="VmVolumespage.page" :page-size="VmVolumespage.count" :page-sizes="[1, 10, 20]"
                @update:current-page="VmVolumesPageChange" @update:page-size="VmVolumesSizeChange" />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="container_message.id" label="虚拟机网络管理">
        <VirtualWeb :ID="container_message.id" />
      </el-tab-pane>
      <el-tab-pane v-if="container_message.id" label="快照列表">
        <Snapshot :ID="container_message.id" @SetState="SetInfoState" />
      </el-tab-pane>
    </el-tabs>
    <!-- 数据卷 -->
    <el-dialog v-model="addPortDialog" title="创建数据卷" width="500" draggable overflow>
      <div>
        <el-form ref="formRefs" :model="formVolumes" :rules="rules" label-width="auto" style="max-width: 600px">
          <el-form-item label="容器卷大小" prop="size">
            <el-input v-model="formVolumes.size" type="number" :min="1" placeholder="GB" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addPortDialog = false">关闭</el-button>
          <el-button type="primary" :loading="addVolumesDialog" @click="addVolumes()">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 迁移数据卷 -->
    <el-dialog v-model="migrateVolumesDialog" title="迁移数据卷" width="500" draggable overflow>
      <Migrate :ID="migrateVolumesID" :server_id="container_message.server_id" @SetMigrate="SetVolumes" />
    </el-dialog>

    <el-dialog v-model="dialogOverflowVisible" title="创建端口" width="500" draggable overflow>
      <div>
        <el-form ref="formRef" :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="容器内部端口号" prop="container_port" :rules="[
            {
              required: true,
              message: '请输入容器内部端口号',
              trigger: 'blur'
            },
            {
              validator: (rule, value, callback) => {
                if (value < 1 || value > 65535) {
                  callback(new Error('端口号应在1-65535之间'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ]">
            <el-input v-model="form.container_port" type="number" :min="1" :max="65535" placeholder="端口号应在1-65535之间" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogOverflowVisible = false">关闭</el-button>
          <el-button type="primary" @click="submit()"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="image_dialog" title="重装" width="40%">
      <el-form>
        <el-form-item label="镜像">
          <el-select v-model="image_id" placeholder="你可以选择重装镜像">
            <el-option v-for="item in image_list" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="image_dialog = false">关闭</el-button>
          <el-button type="primary" @click="torein">确认重装</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 用户列表选择 -->
    <el-dialog v-model="SetUser_dialog" title="用户列表" width="600">
      <SetUSer @SetIdUSer="vmSetUser" />
    </el-dialog>
    <!-- 套餐列表选择 -->
    <el-dialog v-model="SetPlan_dialog" title="套餐列表" width="40%">
      <SetPlan :ID="container_message.server_id" :TCID="container_message.tc.plan_id" @SetIdPlan="vmSetPlan" />
    </el-dialog>
    <el-dialog v-model="setupstop" title="暂停原因" width="800">
      <el-input v-model="textstop" style="width: 100%" autosize type="textarea" placeholder="请输入暂停原因" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="setupstop = false">取消</el-button>
          <el-button type="primary" @click="okstop()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="httpscert" title="请填写信息" width="800" align-center>
      <AddHttps :info="infohttps" @off="offdialog" />
    </el-dialog>
  </div>
</template>
<style scoped>
.el-descriptions {
  margin-top: 20px;
}

.info_table {
  margin: 20px 0;
}

:deep(.el-col) {
  margin-top: 5px;
}

.mytitle {
  max-width: 800px;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
}

@media (max-width: 800px) {
  .ovf {
    overflow-x: scroll;
  }
}
</style>
